// ----------------------- 图表概览 -----------------------
function overview() {
  axios.get('/student/overview').then(({data:{code,data}}) => {
    // console.log(code,data)
    if(code === 0) {
      qs('.total').innerHTML = data.total
      qs('.avgSalary').innerHTML = data.avgSalary
      qs('.avgAge').innerHTML = data.avgAge
      qs('.proportion').innerHTML = data.proportion
    }
  })
}
overview()

// ----------------------- 饼图 -----------------------
function pie() {
  // 1、已引入
  // 2、设置一个有宽高的DOM容器（已设置pie的div）
  // 3、初始化实例对象
  const myChart = echarts.init(document.querySelector('.pie'))
  // 4、设置配置项
  const option = {
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e' // 标题颜色
      },
    },
    tooltip: {
      show: true
    },
    // legend: {
    //   top: 'bottom'
    // },
    toolbox: {
      show: true,   // 是否显示工具栏组件
      feature: {
        mark: { show: true },
        // dataView: { show: true, readOnly: false },
        // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
        // restore: { show: true },   // 配置项还原
        // saveAsImage: { show: true }   // 保存为图片
      }
    },
    series: [
      {
        name: '各地学员分布',
        type: 'pie',
        radius: ['10%', '65%'], // 内外圈的半径
        center: ['50%', '50%'],
        roseType: 'area',   // 所有扇区圆心角相同
        itemStyle: {
          borderRadius: 5
        },
        data: [
          { value: 3, name: '广东省' },
          { value: 1, name: '广西壮族自治区' },
          { value: 1, name: '内蒙古自治区' },
          { value: 1, name: '福建省' }
        ]
      }
    ]
  };
  // 5、建立实例对象与配置项的联系
  myChart.setOption(option)
}
pie()

// ----------------------- 地图 -----------------------



// 柱状图数据获取并渲染
// 函数形参的默认值
function getBarInfo(batch = 1) {
  // console.log(batch)
  axios.get('/score/batch',{
    params:{
      batch
    }
  }).then(({data:res}) => {
    // console.log(res)
    // 渲染柱状图
    bar(res.data)
  })
}
getBarInfo()

/* 
  1、给三个点注册点击事件
  2、切换类名toggle
  3、获取li标签，遍历注册点击事件
  3、点击之后获取下表传参
*/
qs('.btn').addEventListener('click',function() {
  qs('#batch').classList.toggle('show')
  qsAll('#batch li').forEach((item,index) => {
    item.addEventListener('click',function() {
      // console.log(index)
      getBarInfo(index + 1)
    })
  })
})

//  ----------------------- 柱状图 -----------------------
function bar({group,avgScore,lt60,gt60,gt80}) {
  // console.log(group,avgScore,lt60,gt60,gt80)
  const myChart = echarts.init(document.querySelector('.barChart'))
  const option = {
    // 网格（整个图表区域设置）
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      // data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: group,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value}分'
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        barWidth: '15',   // 柱状图的宽度
        data: avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        barWidth: '15',   // 柱状图的宽度
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        data: lt60
      },
      {
        name: '60到80分之间',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        barWidth: '15',   // 柱状图的宽度
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        data: gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        barWidth: '15',   // 柱状图的宽度
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        data: gt80
      }
    ]
  }
  myChart.setOption(option)
}


// 折线图数据获取并渲染
function getLineInfo() {
  axios.get('/student/list').then(({data:{code,data}}) => {
    // console.log(code,data)
    const nameList = []
    const salaryList = []
    const trueSalaryList = []
    if(code === 0) {
      data.forEach(item => {
        nameList.push(item.name)
        salaryList.push(item.salary)
        trueSalaryList.push(item.truesalary)
      })
      // console.log(nameList,salaryList,trueSalaryList)
    }
    // 或跑去之后渲染到折线图中
    line(nameList,salaryList,trueSalaryList)
  })
}
getLineInfo()


// ----------------------- 折线图 -----------------------
function line(nameList,salaryList,trueSalaryList) {
  const myChart = echarts.init(qs('.line'))
  const option = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    legend: {
      top:20
    },
    title: {
      left: 'left',
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: nameList
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '50%']
    },
    dataZoom: [
      // {
      //   type: 'inside',
      //   start: 0,
      //   end: 10
      // },
      {
        start: 0, // 拖动滑块开始位置（这是一个百分比）
        end: 15 // 拖动滑块结束位置（这是一个百分比）
      }
    ],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        symbol: 'none',
        sampling: 'lttb',
        itemStyle: {
          color: '#ee6666'
        },
        smooth: true, // 表示使用平滑曲线,
        data: salaryList
      },
      {
        name: '实际薪资',
        type: 'line',
        symbol: 'none',
        sampling: 'lttb',
        itemStyle: {
          color: '#5470c6'
        },
        smooth: true, // 表示使用平滑曲线,
        data: trueSalaryList
      }
    ]
  };
  myChart.setOption(option)
}